<!DOCTYPE html>
<html>
  <head>
    <script src="../dist/jspsych.js"></script>
    <script src="../dist/plugin-image-keyboard-response.js"></script>
    <script src="../dist/plugin-html-keyboard-response.js"></script>
    <script src="../dist/plugin-preload.js"></script>
    <link rel="stylesheet" href="../dist/jspsych.css">
  </head>
  <body></body>
  <script>

    var jsPsych = initJsPsych({
      show_progress_bar: true,
      on_finish: function() {
        jsPsych.data.displayData();
      }
    });

    var preload = {
      type: jsPsychPreload,
      auto_preload: true
    };

    var trial_1 = {
      type: jsPsychImageKeyboardResponse,
      stimulus: 'img/happy_face_1.jpg',
      choices: ['y','n'],
      render_on_canvas: false,
      stimulus_width: 300,
      prompt: '<p>Have you seen this face before? Press "y" or "n".</p>'
    };

    var trial_2 = {
      type: jsPsychImageKeyboardResponse,
      stimulus: 'img/happy_face_2.jpg',
      choices: ['y','n'],
      render_on_canvas: false,
      stimulus_width: 300,
      prompt: '<p>Have you seen this face before? Press "y" or "n".</p>'
    };

    var trial_3 = {
      type: jsPsychImageKeyboardResponse,
      stimulus: 'img/happy_face_3.jpg',
      choices: ['y','n'],
      render_on_canvas: false,
      stimulus_width: 300,
      prompt: '<p>Have you seen this face before? Press "y" or "n".</p>'
    };

    var count = 0;

    var block_set = {
      timeline: [trial_1, trial_2, trial_3],
      loop_function: function() {
        count++;
        return count < 2;
      }
    };

    var end_screen = {
      type: jsPsychHtmlKeyboardResponse,
      stimulus: 'The experiment is over.'
    };

    jsPsych.run([preload, trial_1, trial_2, trial_3]); // block_set, end_screen

  </script>
</html>
